<template>
  <div>
    <!-- <div>{{total}},{{v}},{{nodes}}</div> -->
     <div id='tree' ref='tree'></div>
    </div>
  </template>
<script>
import FamilyTree from '../../assets/js/familytree'
export default {
  name: 'tree',
  data() {
    return {
      /*
            queryInfo: {
                page: 1,
                limit: 10,
            },*/
      nodes: [],
      temp: [],
      map: { 'id': 0, 'pids': 0, 'name': '' },
      //map:{'id':0,'pids':0,'mid':0,'fid':0,'name':''},
      total:0,  
      v:'',
    }},
  created(){
    this.getNodeList();
  },
  methods: {
    mytree: function(domEl, x) {
      this.family = new FamilyTree (domEl, {
        nodes: x,
        nodeBinding: {
          field_0: 'name',
          img_0: 'img'
        }
      });
    },
    async getNodeList(){
      const { data: res } = await this.$http.get('/familytree');
      if (res.code != 20000) {
        this.$message.error('加载家族族谱失败');
      }
      this.total=res.data['total'];
      this.v=res.data.value;
      var count=0;
      for(var i in res.data.value)
      //for(var i =0;i<this.total;i++)
      {
        count++;
        if(count==1)
        {
                   
          var map={'id':0,'pids':[],'name':'','gender':'','img':''};
          map['id']=res.data.value[i]['Id'];
          map['pids'][0]=res.data.value[i]['Pids'];
          //this.map['mid']=res.data.value[i]['Mid'];
          //this.map['fid']=res.data.value[i]['Fid'];
          map['name']=res.data.value[i]['Name'];
          map['gender']=res.data.value[i]['Gender'];
          map['img']=res.data.value[i]['Img'];
          this.temp[i]=map; 
                    
        }
        else{
                   
          var map={'id':0,'pids':[],'mid':0,'fid':0,'name':'','gender':'','img':''};
          map['id']=res.data.value[i]['Id'];
          map['pids'][0]=res.data.value[i]['Pids'];
          map['mid']=res.data.value[i]['Mid'];
          map['fid']=res.data.value[i]['Fid'];
          map['name']=res.data.value[i]['Name'];
          map['gender']=res.data.value[i]['Gender'];
          map['img']=res.data.value[i]['Img'];
          this.temp[i]=map;               
        }
      }
            
      //this.nodes[0] = this.temp[0]; // 将返回数据赋值
      //this.nodes[1] = this.temp[1]; // 将返回数据赋值
      for (var i = this.total - 1; i >= 0; i -- ) {
        this.nodes[i] = this.temp[i] // 将返回数据赋值
      }
    }
  },
  mounted() {
    this.mytree(this.$refs.tree, this.nodes)
  }
}
</script>
  <style scoped>
  </style>
